<!--
* writer: 姜
* create date: 2018年6月30日
* rewriter:
* rewrite date:
* description:发布视频

 -->

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>发布视频</title>
    <link rel="stylesheet" type="text/css" href="../../../css/base.css" />
    <style media="screen">
        body {
            background: none;
        }

        #header>.pure-box {
            border: none;
        }

        #header>.pure-box .right {
            color: #fff;
        }

        .shooting {
            color: #fff;
            text-align: center;
            padding: 0.3rem;
            position: fixed;
            bottom: 0.5rem;
            left: 0;
            right: 0;
        }

        .shooting-main {
            width: 100%;
            height: 1.25rem;
        }

        .shooting .shooting-title {
            padding-bottom: 0.4rem;
            font-size: 0.28rem;
            width: 100%;
        }

        .shooting .shooting-main .center i {
            position: relative;
            width: 1.2rem;
            height: 1.2rem;
            line-height: 1.2rem;
            display: inline-block;
            background: #fff;
            border-radius: 50%;
            color: #52BE73;
            font-size: 0.4rem;
            box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.5);
        }

        .shooting .shooting-main .center i:active {
            background: #f1f1f1;
        }

        .shooting-main .left img {
            width: 1rem;
            height: 1rem;
            border-radius: 50%;
            background: rgba(239, 239, 239, 0.6);
            padding: 0.25rem;
        }

        .shooting-main .right img {
            width: 1rem;
            height: 1rem;
            border-radius: 50%;
            background: rgba(239, 239, 239, 1);
            padding: 0.25rem;
        }
    </style>
</head>

<body>
    <div id="app">


        <header id="header">
            <div class="pure-box flex-box-x">
                <div class="left flex-y-center" tapmode onclick="closeWin()">
                </div>
                <div class="center col-xs-x flex-xy-center">
                </div>
                <div class="right flex-y-center">
                </div>
            </div>
        </header>

        <main class="shooting flex-botttom-center flex-box-y">
            <div class="shooting-title">点击拍摄视频</div>
            <div class="col-xs-y flex-y-center" style="width:100%">

                <template v-if="shootingStatu">
              <div class="shooting-main flex-box-x">
                  <div class="left col-xs-x flex-xy-center">
                      <img @click="shootReset()" src="">
                  </div>
                  <div class="center col-xs-x">
                  </div>
                  <div class="right col-xs-x flex-xy-center" @click="shootingUp()">
                    <img src="">
                </div>
                  </div>
              </div>
            </template>

                <template v-else>
              <!-- 录制完成 -->
              <div class="shooting-main flex-box-x">
                  <div class="left col-xs-x flex-xy-center" @click="closeWin()">
                      <img style="background:none" src="">
                  </div>
                  <div class="center col-xs-x">
                      <i @click="shootingStart()">{{tempTime}}</i>
                  </div>
                  <div class="right col-xs-x flex-xy-center">
                  </div>
              </div>
            </template>



            </div>
        </main>


    </div>
</body>

</html>
<script type="text/javascript" src="../../../script/api.js"></script>
<script type="text/javascript" src="../../../script/common.js"></script>
<script type="text/javascript" src="../../../script/vue.js"></script>
<script type="text/javascript">
    function click_sub() {
        vm.sub()
    }

    var vm = new Vue({
        el: '#app',
        data: {
            time: 10, //录制时间
            tempTime: 10, //视频录制倒计时
            shootingClick: true, //防止多次点击
            shootingStatu: false, //视频是否拍摄完成
            videoPath: '', //视频路径
            countDown: '', //倒计时
        },
        methods: {

            // 重新拍摄视频
            shootReset: function() {
                vm.tempTime = vm.time;
                vm.shootingStatu = false;
                vm.shootingClick = true;
                var edit = "shootReset();";
                api.execScript({
                    name: 'my/publish/publishing_video_shooting',
                    script: edit
                });
            },

            // 开始录制
            shootingStart: function() {
                console.log(vm.shootingClick)
                if (vm.shootingClick) {
                    vm.tempTime = vm.time;
                    vm.shootingClick = false;
                    var edit = "setShootingStart(" + vm.time + ");";
                    api.execScript({
                        name: 'my/publish/publishing_video_shooting',
                        script: edit
                    });


                    vm.countDown = setInterval(function() {
                        if (vm.tempTime > 0) {
                            vm.tempTime = vm.tempTime - 1
                        } else {
                            vm.shootingStatu = true;
                            clearInterval(vm.countDown);

                            var edit = "shootingStop();";
                            api.execScript({
                                name: 'my/publish/publishing_video_shooting',
                                script: edit
                            });

                        }
                    }, 1000)
                } else {
                    vm.shootingStatu = true;
                    clearInterval(vm.countDown);

                    var edit = "shootingStop();";
                    api.execScript({
                        name: 'my/publish/publishing_video_shooting',
                        script: edit
                    });
                    // vm.shootingStop();


                }
            },


            // 视频发布
            shootingUp: function() {

                var edit = "shootingUp();";
                api.execScript({
                    name: 'my/publish/publishing_video_shooting',
                    script: edit
                });

            },

            init: function() {
                var videoRecorder = api.require('videoRecorder');
                videoRecorder.open({
                    rect: {
                        x: 0,
                        y: 0,
                        w: api.frameWidth,
                        h: api.frameHeight
                    },
                    quality: "720p",
                    saveToAlbum: true,
                    save: {
                        path: 'fs://videoRecorder',
                        name: 'firstVideo'
                    },
                    fixedOn: api.frameName,
                    fixed: false
                }, function(ret) {
                    if (ret) {
                        vm.videoPath = ret.filePath
                    }
                });
            }
        }
    });
    apiready = function() {
        vm.time = api.pageParam.time;
        vm.tempTime = api.pageParam.time;
        api.addEventListener({
            name: 'swiperight'
        }, function(ret, err) {
            return false
        });
    };
</script>
